<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index08-DOM</title>
</head>
<body>
<script type="text/javascript">
    // js中有个知识点叫事件
    // 当页面加载完成之后才执行下面的代码
    // onload:作用就当前面加载成功后执行后面的回调函数
    // window.onload = function () {
    //     //  根据id获取页面中的元素
    //     var oDiv = document.getElementById('div1');
    //     console.log(oDiv);
    //     // 获取节点的类型
    //     console.log(oDiv.nodeType);
    //     // 获取节点的标签名称
    //     console.log(oDiv.nodeName);
    //     console.log(oDiv.nodeName.toLowerCase());
    //     // 获取oDiv的属性节点
    //     var idAttr = oDiv.getAttributeNode("id");
    //     console.log(idAttr);
    //     console.log(idAttr.nodeType);
    //     // 获取完div1后去获取他的父节点
    //     console.log(oDiv.parentNode);
    //     // oDiv.style.background = 'red';
    //     // 获取按钮对象
    //     var oBtn = document.getElementById("btn1");
    //     console.log(oBtn.nodeType);
    //     oBtn.onclick = function () {
    //         console.log("我被点击了")
    //     }
    // }
</script>
    <div id="parentDiv">
        <div id="div1">Hello</div>
        <input id="btn1" type="button" value="按钮"/>
    </div>
    <div id="parentDiv2">
        <div id="childDiv1">Hello1</div>
        <div id="childDiv2">Hello2</div>
        <div id="childDiv3">Hello3</div>
    </div>
    <p class="aaa">段落1</p>
    <p class="aaa">段落2</p>
    <p class="aaa">段落3</p>
    <p>段落4</p>
    <p>段落5</p>
    <div id="div4" class="aaa bbb ccc ddd">多个类选择器</div>
    <div id="div5"></div>
    <h1 id="h1111">我是一级标题</h1>
    <input type="button" value="删除子节点" id="removeBtn"/>
    <input type="button" value="替换子节点" id="replaceBtn"/>
    <input type="button" value="克隆节点" id="copyBtn"/>
    <input type="button" value="前置插入节点" id="insertBtn"/>
    <div id="div6">
        HelloWorld3
    </div>
    <script type="text/javascript">
        // 获取父节点
        // var parentDivObj2 = document.getElementById("parentDiv2");
        // 获取子节点
        // var parentDivObj2ChildNodes = parentDivObj2.childNodes;
        // console.log(parentDivObj2ChildNodes.length); // 子节点个数
        // for (var i = 0; i < parentDivObj2ChildNodes.length; i++) {
        //     // console.log(parentDivObj2ChildNodes[i].nodeType)
        //     if (parentDivObj2ChildNodes[i].nodeType == 1) {
        //         // 元素节点
        //         console.log(parentDivObj2ChildNodes[i])
        //     }
        // }
        // console.log(parentDivObj2.children);
        // firstChild、firstElementChild——获取第一个子节点,
        // firstChild获取到的是任意类型的第一个子节点,firstElementChild获取到的是第一个元素类型的子节点
        // console.log(parentDivObj2.firstChild);
        // console.log(parentDivObj2.firstElementChild);
        // lastChild、lastElementChild
        // console.log(parentDivObj2.lastChild);
        // console.log(parentDivObj2.lastElementChild);

        // 获取div2，获取div2的兄弟节点
        // var childDiv2Obj = document.getElementById("childDiv2");
        // console.log(childDiv2Obj.previousElementSibling);
        // console.log(childDiv2Obj.nextElementSibling);

        // 根据标签名称获取元素
        // var pElements = document.getElementsByTagName("p");
        // // console.log(pElements);
        // console.log(pElements.length);
        // for (var i = 0; i < pElements.length; i++) {
        //     console.log(pElements[i].innerHTML);
        // }

        // 根据类选择器来获取元素
        // var pElements = document.getElementsByClassName("aaa");
        // console.log(pElements.length);
        // for (var i = 0; i < pElements.length; i++) {
        //     console.log(pElements[i].innerHTML);
        // }
        // querySelectorAll()——指定选择器，获取满足该选择器的所有元素
        // querySelector()——只获取到第一个
        // var pElements = document.querySelectorAll(".aaa");
        // console.log(pElements.length);
        // console.log(document.querySelector(".aaa"));
        // var div4Elemens = document.getElementById("div4");
        // console.log(div4Elemens.classList.length);
        // div4Elemens.classList.add('eee');
        // console.log(div4Elemens.classList.length);

        var newDivElement = document.createElement("div");
        console.log(newDivElement);
        newDivElement.innerHTML = 'HelloWorld';
        console.log(newDivElement.innerHTML);
        // 向div5中追加子节点
        var div5Element = document.getElementById("div5");
        div5Element.appendChild(newDivElement);
        document.getElementById("removeBtn").onclick = function(){
            div5Element.removeChild(newDivElement);
        }
        document.getElementById("replaceBtn").onclick = function(){
            // 创建一个新的节点
            var newH3Element = document.createElement("h3");
            newH3Element.innerHTML = '我是三级标题';
            div5Element.replaceChild(newH3Element, newDivElement);
        }
        document.getElementById("copyBtn").onclick = function(){
            // 克隆节点
            var h1Ele = document.getElementById("h1111");
            var h1CloneEle = h1Ele.cloneNode(true);
            div5Element.appendChild(h1CloneEle);
        }
        document.getElementById("insertBtn").onclick = function(){
            var div2Element = document.createElement("div");
            div2Element.innerHTML = "HelloWorld2";
            div5Element.insertBefore(div2Element, newDivElement);
        }
        var div6Element = document.getElementById("div6");
        // 设置属性和属性值
        div6Element.setAttribute("class", "aaa");
        // 获取属性和属性值
        console.log(div6Element.getAttribute("class"));
        // 删除属性
        div6Element.removeAttribute("class");
        // 通过js来设置样式
        // 通过style属性来设置样式
        // 背景色，字体颜色，字体大小，字体加粗
        // backgroundColor:css--->js属性的名称，css中使用带有-，js中需要转换成驼峰命名
        // backgroundColor:css:background-color,js:backgroundColor
        div6Element.style.backgroundColor = 'red';
        div6Element.style.color = 'green';
        div6Element.style.fontSize = '40px';
        div6Element.style.fontWeight = 'bold';
    </script>
</body>
</html>